<script lang="jsx" setup>
import { ref, computed, inject } from 'vue';
import { Button, Modal, message } from 'ant-design-vue';
import { EditOutlined, DeleteOutlined } from '@ant-design/icons-vue';
import { REQU, toFormData, useResp } from '@/net/requ.js';
import FuncModal from './components/func-modal.vue';

const auth = inject('auth');

const props = defineProps(['menuId']);
const emit = defineEmits(['update:visible']);

const loading = ref(false);

const funcModalProps = ref({ visible: false });

function useFuncModal(o) {
  Object.assign(funcModalProps.value, { funcInfo: o }, { visible: true });
}

const menuInfo = ref(null);

const columns = ref([
  {
    title: '功能名称',
    dataIndex: 'functionName',
  },
  {
    title: '功能 code',
    dataIndex: 'functionCode',
  },
  {
    title: '菜单 code',
    dataIndex: 'menuCode',
    customRender: ({ text }) => text || '--',
  },
  {
    title: '接口 code',
    dataIndex: 'interfaceCode',
  },
  {
    width: 120,
    title: '是否需要显示',
    dataIndex: 'needShow',
    customRender: ({ text }) => text ? '需要' : '不需要',
  },
  {
    width: 60,
    title: '排序',
    dataIndex: 'sort',
    customRender: ({ text }) => text,
  },
  {
    fixed: 'right',
    title: '操作',
    width: 160,
    customRender: ({ record }) => (
      <div class="op-btns icon">
        <Button
          type="link"
          disabled={loading.value}
          onClick={() => useFuncModal(record)}>
          {{
            icon: () => <EditOutlined />,
            default: () => '编辑'
          }}
        </Button>
        <Button
          type="link"
          style="color: rgb(200,0,0);"
          disabled={loading.value}
          onClick={() => (
            Modal.confirm({
              content: '确定删除此功能？',
              cancelText: '取消',
              okText: '确定',
              onOk: () => delFunc(record.id.join(',')),
            })
          )}>
          {{
            icon: () => <DeleteOutlined/>,
            default: () => '删除'
          }}
        </Button>
      </div>
    ),
  },
]);

const dataSource = computed(() => menuInfo.value?.funcList || []);

function getMenuInfo() {
  loading.value = true;
  return REQU(`/api/menu/info?${ new URLSearchParams({ id: props.menuId }) }`)
  .then(useResp({
    succ: result => {
      menuInfo.value = result.data;
      menuInfo.value.funcList.forEach(o => o.sort = R.isNil(o.sort) ? 0 : o.sort);
      return result.data;
    },
  }))
  .finally(() => loading.value = false);
}

function delFunc(ids) {
  return REQU(`/api/function/delete`, {
    method: 'POST',
    body: toFormData({ ids }),
  })
  .then(useResp({
    succ: result => {
      message.success('删除成功');
      getMenuInfo();
    },
  }))
}

function main() {
  getMenuInfo();
}

main();
</script>

<template>
  <div class="simple">
    <a-button
      v-if="auth"
      type="primary"
      @click="() => useFuncModal()">
      + 新建功能
    </a-button>

    <a-table
      :loading="loading"
      :columns="columns"
      :data-source="dataSource"
      :scroll="{ x: 1360 }"
      :pagination="false"
    >
    </a-table>
  
    <func-modal
      v-if="funcModalProps.visible"
      v-model:visible="funcModalProps.visible"
      :func-info="funcModalProps.funcInfo"
      :menu-info="menuInfo"
      @ok="() => getMenuInfo()">
    </func-modal>
  </div>
</template>
